<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
      *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <input type="file" name="file" id="file" value="" />
  </body>
  <script type="text/javascript" src="js/js.js"></script>
  <script type="text/javascript">
  
document.getElementById("file").onchange = function(e){
  var filse = this.files;
  sendFile(filse[0]);
}
  function sendFile (gifFiles) { // gifFiles 获取的文件对象 e.target.files[0]
    const gifImg = document.createElement('img');
    gifImg.setAttribute('rel:animated_src', URL.createObjectURL(gifFiles));
    gifImg.setAttribute('rel:auto_play', '0');
    // Modified pictures must be added to the body
    document.body.appendChild(gifImg);
    // Construction example
    var rub = new SuperGif({ gif: gifImg });
    rub.load(() => {
      var img_list = [];
      for (let i=1; i <= rub.get_length(); i++) {
        // Traversing through each frame of a GIF instance
        rub.move_to(i);
        // Converting each frame of canvas into a file object
        let cur_file = this.convertCanvasToImage(rub.get_canvas(), gifFiles.name.replace('.gif', '') + `-${i}`)
        img_list.push({
          file_name: cur_file.name,
          url: URL.createObjectURL(cur_file),
          file: cur_file,
        })
      }
	  console.log(img_list)
    });
  }
function dataURLtoFile (dataurl, filename) {
	    const arr = dataurl.split(',');
	    const mime = arr[0].match(/:(.*?);/)[1];
	    const bstr = atob(arr[1]);
	    var n = bstr.length;
	    const u8arr = new Uint8Array(n);
	    while (n--) {
	      u8arr[n] = bstr.charCodeAt(n);
	    }
	    return new File([u8arr], filename, {type:mime});
	  }
function convertCanvasToImage (canvas, filename) {
	   return this.dataURLtoFile(canvas.toDataURL('image/png'), filename);
	  }
	
	
  </script>
</html>